<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>直播系统 - 自定义版</title>
    <link rel="stylesheet" href="css/tailwind.css" />
  </head>
  <body
    class="bg-gradient-to-br from-blue-400 via-purple-500 to-purple-700 min-h-screen"
  >
    <div class="container mx-auto px-4 py-8 max-w-7xl">
      <!-- Header -->
      <header class="text-center mb-8">
        <h1
          class="text-4xl md:text-5xl font-bold text-white mb-2 drop-shadow-lg animate-fade-in"
        >
          🎥 直播系统
        </h1>
        <p class="text-white/80 text-lg">现代化的直播体验</p>
      </header>

      <!-- Main Content -->
      <main class="grid lg:grid-cols-3 gap-6 h-[calc(100vh-200px)]">
        <!-- Video Section -->
        <div class="lg:col-span-2 grid md:grid-cols-2 gap-6">
          <!-- Local Video Container -->
          <div class="glass-card p-6 animate-slide-up">
            <h2 class="text-xl font-semibold text-white mb-4 flex items-center">
              <span class="mr-2">📹</span>本地摄像头
            </h2>

            <div class="relative">
              <video
                id="localVideo"
                autoplay
                muted
                playsinline
                class="w-full h-64 bg-gray-900/50 rounded-xl border-2 border-white/20 object-cover"
              ></video>

              <!-- Status Overlay -->
              <div class="absolute top-3 left-3">
                <span
                  id="status"
                  class="px-3 py-1 text-white text-sm rounded-full bg-gray-500/80"
                >
                  未连接
                </span>
              </div>
            </div>

            <!-- Controls -->
            <div class="flex flex-wrap gap-3 mt-4">
              <button id="startBtn" class="btn-success">开始直播</button>
              <button id="stopBtn" disabled class="btn-danger">停止直播</button>
              <button id="cameraToggle" class="btn-primary">切换摄像头</button>
            </div>

            <!-- Stream Info -->
            <div
              id="streamInfo"
              class="hidden mt-4 p-4 bg-white/10 rounded-xl border border-white/20 animate-slide-up"
            >
              <h3 class="text-white font-semibold mb-2">📡 直播间信息</h3>
              <div class="flex items-center gap-3">
                <label class="text-white/80 text-sm font-medium"
                  >直播间ID：</label
                >
                <span
                  id="currentStreamId"
                  class="flex-1 px-3 py-2 bg-gray-800/50 text-white font-mono text-sm rounded-lg border border-white/20"
                ></span>
                <button
                  id="copyStreamId"
                  title="复制直播间ID"
                  class="btn-primary"
                >
                  📋
                </button>
              </div>
            </div>
          </div>

          <!-- Remote Video Container -->
          <div
            class="glass-card p-6 animate-slide-up"
            style="animation-delay: 0.1s"
          >
            <h2 class="text-xl font-semibold text-white mb-4 flex items-center">
              <span class="mr-2">📺</span>直播观看
            </h2>

            <video
              id="remoteVideo"
              autoplay
              playsinline
              controls
              class="w-full h-64 bg-gray-900/50 rounded-xl border-2 border-white/20 object-cover"
            ></video>

            <!-- Viewer Controls -->
            <div class="mt-4 space-y-3">
              <input
                type="text"
                id="streamUrl"
                placeholder="输入直播间ID"
                class="w-full px-4 py-2 input-glass"
              />
              <div class="flex gap-3">
                <button id="joinBtn" class="flex-1 btn-primary">
                  加入直播间
                </button>
                <button id="leaveBtn" disabled class="flex-1 btn-secondary">
                  离开直播间
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Chat Section -->
        <div
          class="glass-card p-6 flex flex-col animate-slide-up"
          style="animation-delay: 0.2s"
        >
          <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
            <span class="mr-2">💬</span>聊天室
          </h3>

          <!-- Messages Container -->
          <div
            id="messages"
            class="flex-1 overflow-y-auto bg-white/5 rounded-xl p-4 border border-white/20 mb-4 space-y-3 max-h-96 scrollbar-thin"
          >
            <!-- Messages will be populated here -->
            <div class="text-white/60 text-center text-sm">暂无消息</div>
          </div>

          <!-- Chat Input -->
          <div class="flex gap-3">
            <input
              type="text"
              id="messageInput"
              placeholder="输入消息..."
              class="flex-1 px-4 py-2 input-glass"
            />
            <button id="sendBtn" class="btn-primary">发送</button>
          </div>
        </div>
      </main>
    </div>

    <!-- Scripts -->
    <script src="js/webrtc.js"></script>
    <script src="js/chat.js"></script>
    <script src="js/main.js"></script>

    <!-- Status Management Script -->
    <script>
      // 状态管理
      const statusElement = document.getElementById("status");

      function updateStatusClass(status) {
        // 移除所有状态类
        statusElement.className = "px-3 py-1 text-white text-sm rounded-full ";

        // 添加对应状态类
        switch (status) {
          case "ready":
            statusElement.className += "status-ready";
            break;
          case "connecting":
            statusElement.className += "status-connecting";
            break;
          case "streaming":
            statusElement.className += "status-streaming";
            break;
          case "connected":
            statusElement.className += "status-connected";
            break;
          case "error":
            statusElement.className += "status-error";
            break;
          default:
            statusElement.className += "bg-gray-500/80";
        }
      }

      // 监听状态变化
      const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          if (
            mutation.type === "childList" ||
            mutation.type === "characterData"
          ) {
            const status = statusElement.textContent;
            if (status.includes("准备就绪")) updateStatusClass("ready");
            else if (status.includes("连接") && !status.includes("已连接"))
              updateStatusClass("connecting");
            else if (status.includes("直播中")) updateStatusClass("streaming");
            else if (status.includes("已连接")) updateStatusClass("connected");
            else if (status.includes("失败") || status.includes("错误"))
              updateStatusClass("error");
          }
        });
      });

      observer.observe(statusElement, {
        childList: true,
        characterData: true,
        subtree: true,
      });
    </script>
  </body>
</html>
